<template>
  <!-- 三级分类 -->
  <Catalogue :screen="screen" />

  <el-card style="margin: 20px 0px">
    <div v-show="screen == 0">
      <!-- 按钮 -->
      <el-button
        type="primary"
        icon="Plus"
        :disabled="cateStore.c3Id == ''"
        @click="inserSpu"
      >
        新增SPU
      </el-button>
      <!-- 表格 -->
      <el-table border style="margin: 20px 0px" :data="spuList">
        <el-table-column
          label="序号"
          type="index"
          align="center"
          width="80px"
        ></el-table-column>
        <el-table-column label="SPU名称" prop="spuName"></el-table-column>
        <el-table-column
          label="SPU描述"
          show-overflow-tooltip
          prop="description"
        ></el-table-column>
        <el-table-column label="操作">
          <template #="{ row, $index }">
            <el-button
              type="primary"
              size="small"
              icon="Edit"
              title="spu编辑"
              @click="editSpu(row)"
            >
              spu编辑
            </el-button>

            <el-popconfirm
              width="220"
              @confirm="removeSpu(row)"
              :title="`确定删除${row.spuName}吗?`"
              icon-color="#626AEF"
            >
              <template #reference>
                <el-button
                  type="primary"
                  size="small"
                  icon="Delete"
                  title="spu删除"
                >
                  spu删除
                </el-button>
              </template>
            </el-popconfirm>

            <el-button
              type="primary"
              size="small"
              icon="Plus"
              title="sku新增"
              @click="insertSku(row)"
            >
              sku新增
            </el-button>
            <el-button
              type="primary"
              size="small"
              icon="View"
              title="sku查看"
              @click="querySkuList(row)"
            >
              sku查看
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页插件 -->
      <el-pagination
        v-model:current-page="page"
        v-model:page-size="pageSize"
        :page-sizes="[3, 5, 7, 14]"
        :background="true"
        layout=" prev, pager, next, jumper,->,sizes,total"
        :total="total"
        @size-change="changePageSize"
        @current-change="getSpuInfo"
      />
    </div>
    <div v-show="screen == 1">
      <!-- spu编辑和新增界面 -->
      <SpuForm ref="spu" @changeScreen="changeScreen"></SpuForm>
    </div>
    <div v-show="screen == 2">
      <!-- spu编辑和新增界面 -->
      <SkuForm ref="sku" @changeScreen="changeScreen"></SkuForm>
    </div>
  </el-card>

  <!-- sku列表 -->
  <el-dialog v-model="showTag" title="SKU列表">
    <el-table :data="skuList" border>
      <el-table-column prop="skuName" label="名称"></el-table-column>
      <el-table-column prop="price" label="价格(元)"></el-table-column>
      <el-table-column prop="weight" label="重量(g)"></el-table-column>
      <el-table-column label="图片">
        <template #="{ row, $index }">
          <img
            :src="row.skuDefaultImg"
            alt=""
            style="width: 100px; height: 100px"
          />
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
</template>
<script setup lang="ts">
import SpuForm from './spuForm.vue'
import Catalogue from '../att/catalogue.vue'
import SkuForm from './SkuForm.vue'
import { ref, reactive, watch } from 'vue'
import useCateStore from '@/store/modules/cate'
import { reqHasSpu, reqFindBySkuId, reqDelSpu } from '@/api/pro/spu.ts'
import { ElMessage } from 'element-plus'
//使用仓库
let cateStore = useCateStore()
// 控制子组件显示和隐藏
let screen = ref(0)
// 分页插件
let page = ref(1)
let pageSize = ref(3)
const changePageSize = () => {
  getSpuInfo(1)
}
let sku = ref()
//子组件spuform
const spu = ref()
//sku列表的显示和隐藏标志
let showTag = ref(false)
//sku列表的数据
let skuList = ref([])
//子组件spuform的自定义事件
//@ts-ignore
const changeScreen = (obj) => {
  screen.value = obj.tag
  if (obj.param == 'add') {
    //刷新请求数据
    getSpuInfo(1)
  } else {
    getSpuInfo(page.value)
  }
}
//spu数据
const spuList = ref([])
const total = ref(10)
watch(
  () => cateStore.c3Id,
  () => {
    spuList.value = []
    //发送请求，获取spu数据
    getSpuInfo(1)
  },
)
//获取spu数据
//@ts-ignore
const getSpuInfo = async (page1) => {
  if (cateStore.c3Id == '') {
    return
  }
  page.value = page1
  const res = await reqHasSpu(page.value, pageSize.value, cateStore.c3Id)
  if (res.code == 200) {
    spuList.value = res.data.records
    total.value = res.data.total
  }
}
//新增spu
const inserSpu = () => {
  screen.value = 1
  spu.value.initSpuInfo(cateStore.c3Id)
}
//编辑spu
//@ts-ignore
const editSpu = (row) => {
  screen.value = 1
  spu.value.getSpuInfo(row)
}
//添加sku
//@ts-ignore
const insertSku = (spu) => {
  //需要
  screen.value = 2
  sku.value.initSkuData(cateStore.c1Id, cateStore.c2Id, spu)
}
//查看sku列表
//@ts-ignore
const querySkuList = async (row) => {
  const res = await reqFindBySkuId(row.id)
  skuList.value = res.data
  showTag.value = true
}
//删除spu数据
//@ts-ignore
const removeSpu = async (row) => {
  const res = await reqDelSpu(row.id)
  if (res.code == 200) {
    ElMessage({
      type: 'success',
      message: '删除成功',
    })
    getSpuInfo(1)
  } else {
    ElMessage({
      type: 'success',
      message: '删除失败',
    })
  }
}
</script>
<style scoped lang="scss"></style>
